<template>
	<view class="options-list" v-if="true">
		<!-- 点赞 -->
		<view class="options-list-li" @click="clickForver">
			<template v-if="data.current_user_fover">
				<wd-icon name="heart-filled" :size="iconSize" color="#ff0e3a"></wd-icon>
			</template>
			<template v-else>
				<wd-icon name="heart" :size="iconSize" :color="iconNormalColor"></wd-icon>
			</template>
			<text v-if="data.fover" class="options-list-li-text">{{data.fover}}</text>
		</view>
		<!-- 评论 -->
		<view class="options-list-li" @click="clickComment">
			<wd-icon name="chat1" :size="iconSize" :color="iconNormalColor"></wd-icon>
			<text v-if="data.comment" class="options-list-li-text">{{data.comment}}</text>
		</view>
		<!-- 打招呼 -->
		<view class="options-list-li" v-if="false">
			<template v-if="data?.userGreet?.greet">
				<wd-icon name="pointing-hand" :size="iconSize" color="#ff0e3a"></wd-icon>
			</template>
			<template v-else>
				<wd-icon name="pointing-hand" :size="iconSize" :color="iconNormalColor"></wd-icon>
			</template>
			<text class="options-list-li-text" @click="clickGreet">打招呼</text>
		</view>
		<!-- 删除 -->
		<template >
			<view class="options-list-li" v-if="data.if_my_dynamic">
				<text class="options-list-li-text" @click="clickDelete">删除</text>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const Props = defineProps(["data"])
	const Emits = defineEmits(["fover"])
	import {
		ref
	} from 'vue'
	const iconSize = ref("35rpx")
	const iconNormalColor = ref("#cad7e2")
	const Data = reactive({
		FoverIcon: {
			iconSize: "35rpx",
			NormalIconName: "heart-filled",
			ActiveIconName: "heart",
			NormalColor: "#cad7e2",
			ActiveColor: "",
			value: ""
		},
		GreetIcon: {
			iconSize: "35rpx",
			NormalIconName: "pointing-hand",
			ActiveIconName: "pointing-hand",
			NormalColor: "#cad7e2",
			ActiveColor: "#cad7e2",
			value: ""
		},
		Comment: {
			iconSize: "35rpx",
			NormalIconName: "pointing-hand",
			ActiveIconName: "pointing-hand",
			NormalColor: "#cad7e2",
			ActiveColor: "#cad7e2",
			value: ""
		}
	})
	function clickForver() {
		Emits("fover")
	}
	function clickLookComment() {
		Emits("clickLookComment")
	}

	function clickComment() {
		Emits("clickComment")
	}

	function clickDelete() {
		Emits("clickDelete")
	}
</script>
<style scoped lang="scss">
	.options-list {
		font-size: 30rpx;
		display: flex;
		gap: 45rpx;
		margin: 8rpx 0rpx;
		margin-top: 20rpx;

		&-li {
			display: flex;
			gap: 12rpx;
			align-items: center;
		}
	}
</style>